<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken = "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      this.map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", 
        center: [118.79013542048335, 32.05775855185749], 
        zoom: 5,
        // projection: "mercator",
      });
      //
      this.map.on("click", (evt) => {
        console.log(evt.lngLat);
      });




   

    },
  },
};
</script>

<style></style>
